<template>
  <div>
  <div class="app-container home">
    <el-row :gutter="20">
      <el-col :sm="24" :lg="24">
        报价单
      </el-col>
    </el-row>
    <el-row class="mb-4">
      <el-button type="primary"  @click.prevent="TestButton">按钮</el-button>
    </el-row>
  </div>

  <el-form ref="quoteForm"  label-width="120px">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>报价单基本信息</span>
      </div>
      <el-form-item label="选择对应的客户">
        <el-select
            v-model="priceList.customerId"
            placeholder="请选择客户"
            @visible-change="fetchUsers"
        >
          <el-option
              v-for="user in users"
              :key="user.id"
              :label="user.name"
              :value="user.id"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="报价单有效期">
        <el-date-picker
            v-model="time"
            type="daterange"
            unlink-panels
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            format="YYYY-MM-DD"
            value-format="YYYY-MM-DD"
        >
        </el-date-picker>
      </el-form-item>
    </el-card>

    <!-- 商品信息板块 -->
    <el-card class="box-card" v-for="(product, index) in priceList.priceDetailedList" :key="index">
      <div slot="header" class="clearfix">
        <span>商品信息 {{ index + 1 }}</span>
        <el-button style="float: right; padding: 3px 0" type="text" v-if="index === 0" @click="addProduct">添加商品</el-button>
        <el-button style="float: right; padding: 3px 0; margin-right: 10px" type="text" v-if="index !== 0" @click="removeProduct(index)">删除</el-button>
      </div>
      <el-form-item label="选择对应的商品">
        <el-select
            v-model="product.variantId"
            placeholder="请选择商品"
            @visible-change="getVariants"
        >
          <el-option
              v-for="variant in variants"
              :key="variant.id"
              :label="variant.name"
              :value="variant.id"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="商品售价">
        <el-input v-model="product.unitPrice"></el-input>
      </el-form-item>
      <el-form-item label="最大销售数量">
        <el-input-number v-model="product.productNum" :min="1"></el-input-number>
      </el-form-item>
    </el-card>

    <!-- 提交按钮 -->
    <el-form-item>
      <el-button type="primary" @click="submitForm">提交报价单</el-button>
    </el-form-item>
  </el-form>
  </div>
</template>

<script setup>
import {ref} from "vue";
import {Test} from "../../../api/test"
import {getCustomer} from "../../../api/sale/customer";
import {getVariant} from "../../../api/sale/prodect";
import {addPriceList} from "../../../api/sale/priceList";

const version = ref('3.8.1')


function TestButton() {
  Test().then(res=>{
    alert(res)
  })
}
//客户
const users = ref([]);
const fetchUsers =async (visible) =>{
    if(visible){
      getCustomer().then(res=>{
        users.value = res.customerList.map(user => ({
          id: user.customerId,
          name: user.customerName
        }));
      })
    }
};
const variants=ref([]);
const getVariants=async (visible)=>{
  if(visible){
    getVariant().then(res=>{
       variants.value=res.productList.map(variant=>({
         id:variant.variantId,
         name:variant.brand+variant.productName+variant.typeName+variant.weight
       }))
    })
  }
}


// 页面的基础
const priceList=ref({
  customerId:'',//对
  createTime:'',
  validityPeriod:'',
  priceDetailedList:[
    {  unitPrice: '', productNum: 1 ,variantId:''},
  ]
})

const time=ref([])

function addProduct() {
  priceList.value.priceDetailedList.push({  unitPrice: '', productNum: 1 ,variantId:''});
}

function removeProduct(index) {
  priceList.value.priceDetailedList.splice(index, 1);
}

function submitForm() {
  priceList.value.createTime=time.value[0];
  priceList.value.validityPeriod=time.value[1];
  addPriceList(priceList.value).then(res=>{
     if(res.code===200){

         alert("报价单添加成功")

       priceList.value={
         customerId:'',
         createTime:'',
         validityPeriod:'',
         priceDetailedList:[
           {  unitPrice: '', productNum: 1 ,variantId:''},
         ]
       }
       time.value= [];
       variants.value=[];
       users.value=[]
     }
  })
}
</script>

<style scoped lang="scss">
.home {
  blockquote {
    padding: 10px 20px;
    margin: 0 0 20px;
    font-size: 17.5px;
    border-left: 5px solid #eee;
  }
  hr {
    margin-top: 20px;
    margin-bottom: 20px;
    border: 0;
    border-top: 1px solid #eee;
  }
  .col-item {
    margin-bottom: 20px;
  }

  ul {
    padding: 0;
    margin: 0;
  }

  font-family: "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 13px;
  color: #676a6c;
  overflow-x: hidden;

  ul {
    list-style-type: none;
  }

  h4 {
    margin-top: 0;
  }

  h2 {
    margin-top: 10px;
    font-size: 26px;
    font-weight: 100;
  }

  p {
    margin-top: 10px;

    b {
      font-weight: 700;
    }
  }

  .update-log {
    ol {
      display: block;
      list-style-type: decimal;
      margin-block-start: 1em;
      margin-block-end: 1em;
      margin-inline-start: 0;
      margin-inline-end: 0;
      padding-inline-start: 40px;
    }
  }
}

//AI
.box-card {
  margin-bottom: 20px;
}
.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both
}
</style>

